<template>
  <view>
    <tm-scrolly ref="scrollRef" :height="listHeight" :refresher="false" @bottom="onScrollToBottom">
      <view class="" v-if="listData.length > 0">
        <uni-card v-for="(item, key) in listData" :key="key" @click="detail(item.elevatorId,item.machineName)">
          <view class="title-content">
            <text>{{ item.elevatorName }}</text>
            <!-- 已完成 right-->
            <view class="successAccomplish" v-show="item.isFault == 1">
              <image src="../../../static/image/fault/fault_icon.png" mode=""></image>
              <view class="">
                <!-- <text>{{item.elevatorStatus == 1 ? '故障' :item.elevatorStatus == 2 ? '离线':item.elevatorStatus == 3 ? '困人' : '正常' }}</text> -->
                <text>{{ item.status }}</text>
              </view>
            </view>
          </view>
        </uni-card>
      </view>
    </tm-scrolly>
    <view class="" v-if="listData.length === 0">
      <nullPage></nullPage>
    </view>
  </view>
</template>

<script>
import nullPage from '@/components/null.vue'
import {listElevator} from "@/api/iot/elevator";
import uniCard from "@/uni_modules/uni-card/components/uni-card/uni-card.vue";
import {useWindowInfo} from "@/tmui/tool/useFun/useWindowInfo";

export default {
  components: {uniCard, nullPage},
  data() {
    return {
      name: '',
      type: 0,
      listData: [],
      pageNum: 1,
      getListFlag: true,
      communityId: "",
      listHeight: 1000
    }
  },

  onLoad(e) {
    /**
     * 获取页面高度 减去上面筛选的高度 再减去下面底部的高度 单位px
     * 返回需要转换为rpx
     */
    const windowInfo = useWindowInfo();
    /**
     * h5获取的height是所有元素的height
     * 微信获取的height是不包标题栏的
     * 但是h5的标题高度会在top属性显示  微信为0
     * 使用height - top就是实际页面高度 不用判断环境了
     */
    const windowHeight = windowInfo.height;
    const titleHeight = windowInfo.top;
    // 头部区域高度
    const headHeight = 40;
    // 底部区域高度
    const bottomHeight = 30;
    const bottomSafe = windowInfo.bottomSafe;
    this.listHeight = uni.$tm.u.torpx(
        windowHeight - titleHeight - headHeight - bottomHeight - bottomSafe,
    );
    this.name = e.title
    this.type = e.type
    this.communityId = e.id
    uni.setNavigationBarTitle({
      title: e.title,
    })
    this.geteleva()
  },
  methods: {
    detail(elevatorId, elevatorName) {
      console.log(this.type);
      var pages = getCurrentPages();
      var prvePage = pages[pages.length - 3];
      if (this.type == 1) {
        // prvePage.$vm.name = elevatorId;
        // #ifdef APP-PLUS
        prvePage.$vm.elevator_name(elevatorId);
        // #endif
        // #ifdef H5
        prvePage.elevator_name(elevatorId);
        // #endif

        uni.navigateBack({
          delta: 2
        })
        // uni.navigateTo({
        // 	url: '/pages/tabbar/polling/submit/submit?elevatorId=' + elevatorId,
        // })
      } else if (this.type == 2) {

        prvePage.$vm.elevator_name(elevatorId);
        uni.navigateBack({
          delta: 2
        })
        // uni.navigateTo({
        // 	url: '/pages/tabbar/polling/fault/fault?elevatorId=' + elevatorId,
        // })

      } else if (this.type == 3) {
		console.log("跳转视频详情界面",this.type)
        // 视频详情页面
        uni.navigateTo({
          url: '/pages/tabbar/polling/live/livePlay?elevatorId=' + elevatorId
        })
      } else {
        uni.navigateTo({
          url: './detailsMsg/detailsMsg?elevatorId=' + elevatorId + '&title=' + elevatorName
        })

      }
    },
    async geteleva() {
      let parme = {
        pageNum: this.pageNum,
        pageSize: 10,
        communityId: this.communityId
      }
      const res = await listElevator(parme)
      if (res.rows.length < 10) {
        this.getListFlag = false;
      }
      this.listData.push(...res.rows)
    },
    onScrollToBottom(e) {
      if (this.getListFlag) {
        this.pageNum = this.pageNum + 1;
        this.geteleva();
      }
    }
  },
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

page {
  width: 750rpx;
  background: #EFF2F5;
  overflow: hidden;
}

view {
  font-size: 28rpx;
  line-height: 1.8;

}

.uni-card {
  width: 670rpx;
  /* height: 140rpx; */
  margin: 0 auto;
  background: #FFFFFF;
  box-shadow: 0rpx 10rpx 10rpx 0rpx rgba(52, 54, 61, 0.05);
  border-radius: 16rpx;
  margin-top: 20rpx;
  border: none;
  outline: none;

}

.title-content {
  line-height: 100rpx;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

/* 故障图标样式 */
/* 已完成 */
.successAccomplish {
  background-color: #FF5753;
  width: 140rpx;
  height: 56rpx;
  text-align: center;
  box-shadow: 0px 5px 10px 0px rgba(58, 194, 17, 0.2);
  border-radius: 28rpx;
  color: #FFFFFF;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.successAccomplish image {
  width: 24rpx;
  height: 24rpx;
  padding-right: 15rpx;
  border-radius: 10rpx;

}

.successAccomplish text {
  font-size: 24rpx;
  font-weight: 400;
  color: #FFFFFF;
}
</style>
